<template>
	<view class="mp-content">
		<view class="top-box">
			<!-- <text v-for="(item,index) in statusArray" :key="index" :class="k==index?'t-color':''" @click="itemClick(index)">{{item}}</text> -->
			<u-subsection fontSize="15" :list="typeArray" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		<view class="cbox">
			<u-list @scrolltolower="scrolltolower" v-if="postList.length!=0" @scroll="scroll" :scrollTop="scrollTop">
				<u-list-item
					v-for="(item, index) in postList"
					:key="item.post.id"
				>
				<view class="box-post-content" @click="postsClick(item.post.id)">
					<u-row customStyle="margin-bottom: 8px">
						<u-col span="2">
							<u-avatar size="46" :src="item.user.avatar"></u-avatar>
						</u-col>
						<u-col span="10">
							<view>
								<u--text
									:text="item.user.nickname"
									type="primary"
									bold
									size="15"
								></u--text>
							</view>
							<view class="u-demo-block__content">
								<view style="flex: 25%;"><u-tag text="数计学院" size="mini" ></u-tag></view>
								<view style="flex: 12%;margin-left: 8rpx;"><u-tag text="19级" type="warning" size="mini"></u-tag></view>
								<view style="flex: 18%;margin-left: 8rpx;"><u-tag text="软件工程" type="success" size="mini" ></u-tag></view>
								<view style="flex: 18%;margin-left: 8rpx;"><u-tag :text="item.post.type | typeToStr()" type="error" size="mini"></u-tag></view>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<u--text size="14" :lines="4" :text="item.post.content"></u--text>
						</u-col>
					</u-row>
					<view class="picture-content">
						<u-album :urls="item.post.imgUrls" multipleSize="100" :previewFullImage="previewFullImage"></u-album>
					</view>
					<u-row v-if="query.type==2">
						<u-col span="3" offset="9">
							<text style="font-size: 16px;color: #7f7f7f;">点赞量：{{item.likeCount}}</text>
							<!-- <u-icon :label="item.likeCount" labelPos="left" name="heart-fill" color="red" size="22"></u-icon> -->
						</u-col>
					</u-row>
				</view>
				</u-list-item>
				<view v-if="flag" style="margin-bottom: 30rpx;">
					<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
				</view>
			</u-list>
			<u-empty
					v-else
					text="暂无发布相关内容!"
					textSize="20"
					textColor="#8f99a3"
					iconColor="blue"
					iconSize="160"
					marginTop="100"
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
			</u-empty>
		</view>
		<!-- 返回顶部组件 -->
		<u-back-top
			:scroll-top="scrollTop" 
			icon="http://106.13.239.254/icon/go_back.png"
			:iconStyle="iconStyle"
			top="500"
			@click="scrollTop=0"
			customStyle="opacity: 0.9;">
		</u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getUserPosts} from '@/utils/api.js'
	export default {
		data() {
			return {
				typeArray:['失物招领','二手交易','拼车服务','校园风景'],
				curNow: 0,
				postList: [],
				flag: false,
				previewFullImage: false,
				scrollTop: 0,
				iconStyle: {
					width: '50rpx',
					height: '50rpx',
				},
				query: {pageNo: 1, pageSize: 10, type: 0},
			}
		},
		filters:{
			typeToStr(type){
				return getApp().getTypeStr(type)
			}
		},
		onLoad(option) {
			this.getList(false)
		},
		//监听下拉是否出现返回顶部组件
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop
		// },
		methods: {
			//监听下拉是否出现返回顶部组件
			scroll(scrollTop){
				this.scrollTop = scrollTop
			},
			sectionChange(index){
				this.curNow = index;
				this.query.pageNo = 1
				this.flag = false
				this.scrollTop = 0
				this.previewFullImage = false
				switch(index){
					case 0: 
						this.query.type = 0
						break;
					case 1:
						this.query.type = 3
						break;
					case 2:
						this.query.type = 1
						break;
					default:
						this.query.type = 2
						this.previewFullImage = true
						break;
				}
				this.getList(true)
			},
			getList(isCut){
				getUserPosts({params: this.query}).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						res.list[i].post.imgUrls = res.list[i].post.imgUrls!=null?res.list[i].post.imgUrls.split(","):[]
					}
					if(isCut){	//切换
						this.postList = res.list
					}else{
						this.postList = this.postList.concat(res.list)
					}
					this.total = res.total
					if(res.list.length == 0) this.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			scrolltolower() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getList(false)
				}else {
					this.flag = true
				}
			},
			postsClick(id){
				if(this.query.type == 2) return
				let url = `/pages/posts-details/posts-details?id=${id}`
				if(this.query.type == 3){
					url = `/pages/goods-details/goods-details?id=${id}`
				}
				uni.$u.route(url);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mp-content {
		//padding-top: 20rpx;
		min-height: 94vh;
		background-color: rgb(242, 242, 242);
		.top-box {
			height: 70rpx;
			padding: 20rpx 0;
		}
		.cbox {
			padding: 4rpx 0;
			margin: 10rpx;
			//background-color: #fff;
			.box-post-content {
				margin: 16rpx 20rpx;
				padding: 18rpx 10rpx 30rpx 16rpx;
				border-radius: 16rpx;
				background-color: #fff;
				.picture-content {
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
			}
			.u-demo-block__content {
			    display: flex;
				justify-content: left;
				margin-top: 10rpx;
				.u-tag,.u-tag-class {
					margin-left: 6rpx;
					width: 80rpx;
				}
			}
		}
	}
</style>
